<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation()">新增</Button>
            <Button type="primary" class="ivu-ml-8" @click="modify">奕远映射诊室修改</Button>
            <Table size="small" :loading="tableLoading" :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="status">
                    <Button v-if="row.status ==='1'" type="success" size="small" @click="changeStatus(row)">启用</Button>
                    <Button v-if="row.status ==='0'" type="error" size="small" @click="changeStatus(row)">停用</Button>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation(row)">编辑</a>
                    <!--                    <Divider type="vertical" />-->
                    <!--                    <a class="deleteBtn" @click="handleDelete(row)">删除</a>-->
                </template>
            </Table>
        </Card>
        <Modal v-model="modal" :title="edit ? '编辑' : '新增'" draggable :mask-closable="false" @on-cancel="handleDrawerCancel()">
            <Form :model="formItem" :rules="ruleValidate" ref="formItem" :label-width="120">
                <FormItem label="名称" prop="input">
                    <Input v-model="formItem.input" placeholder="请输入" clearable></Input>
                </FormItem>
                <FormItem label="排序" prop="sortNum">
                    <Input v-model="formItem.sortNum" clearable />
                </FormItem>
                <FormItem label="状态" prop="switch">
                    <i-switch v-model="formItem.switch">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleDrawerCancel()">取消</Button>
                <Button type="primary" :loading="loading" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
        
        <Modal v-model="relationmodal" title="奕远映射诊室修改" :footer-hide="true" draggable :mask-closable="false" @on-cancel="handleDrawerCancels()">
            <Table size="small" :columns="columns1" :data="sectionlist">
                <template slot-scope="{ row }" slot="select">
                    <Select v-model="row.clinic_id" transfer placeholder="请选择奕远映射诊室" @on-change="relation(row)">
                        <Option v-for="item in cliniclists" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </template>
                <template slot-scope="{ row }" slot="button">
                    <Button type="primary" :disabled="!row.button" @click="relationSubmit(row)">确定</Button>
                </template>
            </Table>
        </Modal>
    </div>
</template>

<script>
    import { GetClinicList, CreateClinic, UpdateClinic, UpdateClinicStatus, DeteleClinic, mapcliniclist, mapclinicupdate } from '@api/setting';
    //验证字符串是否是数字
    function checkNumber(str) {
        var reg = /^[0-9]+$/;
        if (reg.test(str)) {
            return true;
        }
        return false;
    }
    export default {
        name: 'diagnosis',
        data() {
            //表单验证排序字段
            const validateSort = (rule, value, callback) => {
                if (value) {
                    if (checkNumber(value)) {
                        callback()
                    } else {
                        return callback(new Error('排序字段请填写数字'));
                    }
                } else {
                    callback()
                }
            }
            return {
                modal: false,
                relationmodal: false,
                edit: false,
                loading: false,
                tableLoading: false,
                formItem: {
                    input: '',
                    sortNum: "",
                    switch: true
                },
                ruleValidate: {
                    input: [
                        { required: true, message: '诊室名不可为空', trigger: 'blur' }
                    ],
                    sortNum: [
                        { validator: validateSort, trigger: 'blur' }
                    ]
                },
                columns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '诊室人员',
                        key: 'clinic_user'
                    },
                    {
                        title: '状态',
                        slot: 'status'
                    },
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                columns1:[
                    {
                        title: '奕远诊室名称',
                        key: 'section',
                        width: 160
                    },
                    {
                        title: '白友诊室名称',
                        slot: 'select',
                        minWidth: 210
                    },
                    {
                        title: '操作',
                        slot: 'button',
                        width: 80
                    },
                ],
                sectionlist: [],
                cliniclists: [],
                data: []
            }
        },
        created() {
            this.onLoad();
        },
        methods: {

            onLoad() {
                /**
                 * @description 诊室列表 默认不传获取全部数据
                 * @param {Object} param page  {String} 页数
                 * @param {Object} param pageSize {String} 条数/页
                 */
                this.tableLoading = true
                GetClinicList().then((res) => {
                    this.data = res.list
                }).finally(() => {
                    this.tableLoading = false
                })
            },
            handleAllocation(row) {
                console.log(row)
                this.modal = true;
                if (row) {
                    this.edit = true;
                    this.formItem = {
                        input: row.name,
                        switch: row.status === '1',
                        id: row.id,
                        sortNum:row.sort
                    }
                }
            },
            relation(row) {
                row.button = true
                console.log(row)
            },
            relationSubmit(row) {
                let name = this.cliniclists.filter(item=> row.clinic_id === item.id)[0].name
                
                let params = {
                    id: row.id,
                    clinic_id: row.clinic_id,
                    clinic_name: name,
                }
                this.$Modal.confirm({
                    title: '关联诊室',
                    content: '确定当前对应诊室修改无误嘛？',
                    onOk: () => {
                        mapclinicupdate(params).then(()=>{
                            row.clinic_id_other = row.clinic_id
                            row.clinic_name = name
                            row.button = false
                            this.$Message.success('关联成功')
                        })
                    },
                    onCancel: () => {
                        row.clinic_id = row.clinic_id_other
                        row.button = false
                    }
                });
            },
            handleDelete(row) {
                const param = {
                    id: row.id
                }
                this.$Modal.confirm({
                    title: '删除诊室',
                    content: '确定删除当前诊室<span style="color:#ed4014">' + row.name + '</span>?',
                    onOk: () => {
                        this.deleteSubmit(param);
                    },
                    onCancel: () => {
                        console.log('取消删除')
                    }
                });
            },
            changeStatus(row) {
                const param = {
                    id: row.id,
                    status: row.status === '1' ? '0' : '1'
                }
                this.$Modal.confirm({
                    title: '切换诊室状态',
                    content: '确定' + (row.status === '1' ? '停用' : '启用') + '当前诊室?',
                    onOk: () => {
                        this.changeSubmit(param);
                    },
                    onCancel: () => {
                        console.log('取消切换')
                    }
                });
            },
            handleDrawerCancel() {
                this.modal = false;
                this.edit = false;
                this.$refs['formItem'].resetFields()
            },
            modify() {
                mapcliniclist().then(res=>{
                    this.cliniclists = res.clinic
                    this.sectionlist = res.list
                    this.relationmodal = true;
                })
            },
            handleDrawerCancels(){
                this.cliniclists = []
                this.sectionlist = []
                this.relationmodal = false;
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        const params = {
                            name: this.formItem.input,
                            status: this.formItem.switch ? '1' : '0',
                            sort: Number(this.formItem.sortNum) || ""
                        }
                        if (this.edit) {
                            params.id = this.formItem.id;
                            this.updateSubmit(params);
                        } else {
                            this.createSubmit(params);
                        }
                    } else {
                        console.log('表单校验失败！')
                    }
                })
            },
            createSubmit(params) {
                CreateClinic(params).then((res) => {
                    this.$Message.success(' 创建成功');
                    this.loading = false;
                    this.onLoad();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
            updateSubmit(params) {
                UpdateClinic(params).then((res) => {
                    this.$Message.success(' 修改成功');
                    this.loading = false;
                    this.onLoad();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
            deleteSubmit(params) {
                DeteleClinic(params).then((res) => {
                    this.$Message.success(' 删除成功');
                    this.onLoad();
                }).catch(() => { })
            },
            changeSubmit(params) {
                UpdateClinicStatus(params).then((res) => {
                    this.$Message.success('状态切换成功');
                    this.onLoad();
                }).catch(() => { })
            }

        }
    }
</script>

<style scoped>
</style>